import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView} from 'react-native';
import {Stack, useRouter, useLocalSearchParams} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState} from "react";
import { useNavigation } from '@react-navigation/native';
import HomeActivityListComponent from "@/components/HomeActivityList/index"

import SuccessIcon from "@/assets/images/order/successIcon.png"
import LikeIcon from "@/assets/images/order/likeIcon.png"
import avator from "@/assets/images/me/avator.png"


//发布活动待审核-> 等待审核 0
// 发布活动成功-> 无需审核 1
//社群申请成功->无需审核  2

export default function paySuccessScreen() {
    const [type, setType] = useState(0);
    const navigation = useNavigation();

    const router = useRouter();
    const types = useLocalSearchParams().type;

    useEffect(() => {
        // goAbout();
        // goPrivacyAgreement();

        if (types == 0) {
            navigation.setOptions({
                title: "等待审核"
            });
        } else if (types === 1) {
            navigation.setOptions({
                title: "报名成功"
            });
        } else if (types === 2) {
            navigation.setOptions({
                title: "申请成功"
            });
        };
        setType(types);
    }, []);




    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '等待审核', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#F7F7F7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View>
                <View style={styles.successIcon}>
                    <Image source={SuccessIcon} style={{ width: "100%", height: "100%" }} />
                </View>
                {
                    type === 0 && (
                        <View style={{ margin: "auto" }}>
                            <Text style={{ fontSize: 12, color: "#9C9EAC" }}>报名成功，待群主审核通过后，即可加入</Text>
                        </View>
                    )
                }

                {
                    type === 1 && (
                        <View style={{ margin: "auto" }}>
                            <Text style={{ fontSize: 12, color: "#9C9EAC" }}>报名成功，活动结束后可解锁/升级个人标签</Text>
                        </View>
                    )
                }

                {
                    type === 2 && (
                        <View style={{ margin: "auto" }}>
                            <Text style={{ fontSize: 12, color: "#9C9EAC" }}>申请成功，已加入群聊</Text>
                        </View>
                    )
                }

                <TouchableOpacity onPress={() => router.replace("/")}>
                    <View style={styles.successBtn}>
                        <Text style={styles.successBtnText}>完成</Text>
                    </View>
                </TouchableOpacity>
                <View style={styles.likeIcon}>
                    <Image source={LikeIcon} style={{ width: "100%", height: "100%" }} />
                </View>
                {
                    (type == 0 || type == 2) && (
                        <View style={ styles.recommendGroupWrap }>
                            <TouchableOpacity>
                                <View style={styles.recommendItem}>
                                    <View style={styles.recommendLeftWrap}>
                                        <View style={styles.recommendAvator}>
                                            <Image source={avator} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                        <View style={styles.recommendBody}>
                                            <View>
                                                <Text style={styles.groupTitle}>群聊1</Text>
                                            </View>
                                            <View style={{ marginTop: 2, }}>
                                                <Text style={styles.groupDesc}>介绍1介绍1介绍1介绍1</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View>
                                        <AntDesign name="right" size={10} color="#9C9EAC" />
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={styles.recommendItem}>
                                    <View style={styles.recommendLeftWrap}>
                                        <View style={styles.recommendAvator}>
                                            <Image source={avator} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                        <View style={styles.recommendBody}>
                                            <View>
                                                <Text style={styles.groupTitle}>群聊1</Text>
                                            </View>
                                            <View style={{ marginTop: 2, }}>
                                                <Text style={styles.groupDesc}>介绍1介绍1介绍1介绍1</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View>
                                        <AntDesign name="right" size={10} color="#9C9EAC" />
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={styles.recommendItem}>
                                    <View style={styles.recommendLeftWrap}>
                                        <View style={styles.recommendAvator}>
                                            <Image source={avator} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                        <View style={styles.recommendBody}>
                                            <View>
                                                <Text style={styles.groupTitle}>群聊1</Text>
                                            </View>
                                            <View style={{ marginTop: 2, }}>
                                                <Text style={styles.groupDesc}>介绍1介绍1介绍1介绍1</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View>
                                        <AntDesign name="right" size={10} color="#9C9EAC" />
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={styles.recommendItem}>
                                    <View style={styles.recommendLeftWrap}>
                                        <View style={styles.recommendAvator}>
                                            <Image source={avator} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                        <View style={styles.recommendBody}>
                                            <View>
                                                <Text style={styles.groupTitle}>群聊1</Text>
                                            </View>
                                            <View style={{ marginTop: 2, }}>
                                                <Text style={styles.groupDesc}>介绍1介绍1介绍1介绍1</Text>
                                            </View>
                                        </View>
                                    </View>
                                    <View>
                                        <AntDesign name="right" size={10} color="#9C9EAC" />
                                    </View>
                                </View>
                            </TouchableOpacity>
                        </View>
                    )
                }
                {/*{*/}
                {/*    type == 1 && (*/}
                {/*        <View style={{ height: 500, width: "100%", marginTop: 4 }}>*/}
                {/*            <HomeActivityListComponent/>*/}
                {/*        </View>*/}
                {/*    )*/}
                {/*}*/}
            </View>
        </View>

    );
}

const styles = StyleSheet.create({
    successIcon: {
        width: 109,
        height: 109,
        margin: "auto",
    },
    successBtn: {
        width: 92,
        height: 32,
        borderRadius: 17,
        borderColor: "#EC6138",
        borderWidth: 0.5,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        margin: "auto",
        marginTop: 14,
    },
    successBtnText: {
        color: "#EC6138"
    },
    likeIcon: {
        width: 146,
        height: 18,
        margin: "auto",
        marginTop: 60,
        marginBottom: 4,
    },
    recommendGroupWrap: {
        paddingHorizontal: 12,
        marginTop: 5,
    },
    recommendItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: "#fff",
        borderRadius: 8,
        paddingVertical: 12,
        paddingHorizontal: 12,
        marginBottom: 12,
    },
    recommendLeftWrap: {
        flexDirection: "row",
    },
    recommendAvator: {
        width: 52,
        height: 52,
        backgroundColor: "blue",
        borderRadius: 50,
    },
    recommendBody: {
        marginLeft: 10,
        marginTop: 10,
    },
    groupTitle: {
        color: "#2A2B30",
        fontSize: 14,
    },
    groupDesc: {
        fontSize: 12,
        color: "#9C9EAC"
    },
});
